<template>
    <!-- 宠物寄养页面的商家卡片 -->
    <div class="board-card">
        <!-- 使用van-list实现分页 -->
        <van-list v-model="loading" :finished="finished" finished-text="我是有底线的">
            <!-- 一个卡片 -->
            <div class="item-card" @click="goBusiness(item.b_id)" v-for="item in busData" :key="item.b_id">
                <!-- 店铺评分 -->
                <div class="star">
                    <img src="@/assets/img/jiyang/star.png" alt="">
                    <span class="score">{{ item.b_score }}</span>
                </div>
                <!-- 店铺图片 -->
                <img :src="item.b_img" alt="">

                <div class="zdy-home">
                    <!-- 商家名称 -->
                    <div class="home-name">
                        <span>甜心小筑</span>
                        <img src="@/assets/img/jiyang/renzheng.png" alt="">

                    </div>

                    <!-- 所在城市 -->
                    <span class="city-name">{{ item.b_city }}</span>
                </div>

                <div class="icon-price">
                    <span class="btn">{{ item.b_feature }}</span>
                    <span class="day-price">￥{{ item.b_price }}/天</span>
                </div>
            </div>
        </van-list>
        <div class="footer" style="width:100%; height:5rem"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            finished: false,
            page: 1,
            pageSize: 3,
            busData: []
        }
    },
    methods: {
        onload() {
            this.http.get(`${this.$api.getThreeBus}/${this.page}/${this.pageSize}`)
                .then(res => {
                    if (res.data.code == 200) {
                        this.busData = res?.data?.data
                        this.page++
                        this.loading = false
                    } else {
                        this.finished = true
                    }
                })
        },
        // 跳转到商家详情
        goBusiness(b_id) {
            console.log(b_id);
            this.$router.push("/business/" + b_id);
        }
    },
    mounted() {
        this.onload()
    }
}
</script>

<style lang="scss">
.board-card {
    background-color: #f2f2f2;
    overflow: hidden;

    .item-card {
        box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2),
            0, 0.6rem 2rem 0, rgba(0, 0, 0, 0.19);
        background-color: #fff;
        width: 90%;
        height: 30rem;
        margin: 2rem auto;
        border-radius: 0.5rem;
        position: relative;

        .star {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            display: flex;
            width: 6rem;
            height: 2.5rem;
            background-color: #ffffff;
            border-radius: 0.5rem;
            justify-content: center;
            align-items: center;

            img {
                width: 1.6rem;
                display: block;
            }

            span {
                padding-left: 0.5rem;
                font-size: 1.4rem;
                font-weight: bold;
                display: block;
                color: #36343c;
            }
        }

        img {
            width: 100%;
            height: 60%;
            object-fit: cover;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }

        .zdy-home {
            width: 94%;
            margin: auto;
            display: block;
            height: 6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .home-name {
                width: 25rem;
                display: flex;
                align-items: center;

                span {
                    font-size: 1.6rem;
                    font-weight: bold;
                    display: block;
                }

                img {
                    display: block;
                    width: 1.6rem;
                    height: 1.6rem;
                }
            }

            .city-name {
                display: block;
                color: #b6b4c0;
                font-size: 1.2rem;
            }
        }

        .icon-price {
            margin: 1rem auto;
            width: 94%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                display: block;
                font-size: 1.2rem;
            }

            .btn {
                border-radius: 0.6rem;
                background-color: #efedfd;
                color: #8d73ec;
                padding: 0.5rem;
            }
        }
    }
}
</style>